<template>
  <div class="app-container bg">
    <div class="make-content">
      <!-- 左边区域 -->
      <div class="make-left">
        <div class="left-input">
          <el-input v-model="editorForm.title" placeholder="请输入标题" clearable />
        </div>
        <div class="left-input" style="margin-top: 20px;background: #fff;border-radius: 12px;">
          <editor v-model="editorForm.content" :params="{ workDir }" :height="760" />
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="make-right">
        <!-- ai 写作助手 -->
        <div class="ai-write themm-black">
          <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="AI写作助手" name="first"></el-tab-pane>
            <el-tab-pane label="素材库" name="second"></el-tab-pane>
          </el-tabs>
          <!-- ai 写作助手表单 -->
          <div class="ai-write-form" v-if="activeName === 'first'">
            <el-form ref="taskNews" label-position="left" :hide-required-asterisk="true" :model="taskNews"
              :rules="rules" label-width="130px">
              <el-form-item label="请选择受众人群" prop="audienceId">
                <el-select v-model="taskNews.audienceId" placeholder="请选择受众人群" clearable style="width: 100%">
                  <el-option v-for="dict in audienceList" :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
              </el-form-item>
              <div style="display: flex;">
                <el-form-item label="请选择策略或要素" prop="strategyIds" :hide-required-asterisk="true">
                  <el-select v-model="taskNews.strategyIds" placeholder="请选择策略" @change="changeStrategy"
                    style="width: 100%;" :style="{ opacity: taskNews.strategyIds ? 1 : .3 }">
                    <el-option v-for="dict in strategyList" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
                <el-form-item prop="elementIds" label-width="10px">
                  <el-select v-model="taskNews.elementIds" collapse-tags multiple placeholder="请选择心理要素"
                    style="width: 100%" @change="changeElement"
                    :style="{ opacity: taskNews.elementIds.length > 0 ? 1 : .3 }">
                    <el-option v-for="dict in factorsList" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item label="请选择语种" prop="language">
                <el-select v-model="taskNews.language" placeholder="请选择语种" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.language" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="请选择强度" prop="emotional">
                <div class="intension-list">
                  <div class="intension-item" v-for="(item,index) in intensionList">{{ item }}</div>
                </div>
              </el-form-item> -->
              <el-form-item label="请输入主题" prop="newsContent">
                <el-input :rows="4" v-model="taskNews.newsContent" type="textarea" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <div class="ai-write-btn">
              <el-button type="primary" icon="el-icon-c-scale-to-original" class="primary-btn" size="mini"
                @click="createNewsText">生成文案</el-button>
              <el-button type="primary" icon="el-icon-c-scale-to-original" class="primary-btn" size="mini"
                @click="saveMaterial">保存素材</el-button>
            </div>
            <div class="">
              <el-checkbox v-model="savePrivate" label="保存到个人素材"></el-checkbox>
              <el-checkbox v-model="savePublic" label="保存到公共素材"></el-checkbox>
            </div>
            <div class="create-content">
              <el-input :rows="8" v-model="newsContent" type="textarea" />
            </div>
            <!-- 一键插入 -->
            <div class="form-btn">
              <el-button type="primary" icon="el-icon-c-scale-to-original" class="primary-btn" size="mini"
                @click="oneInsertion">一键插入</el-button>
            </div>

          </div>
          <!-- 素材库 -->
          <div class="material-content" v-else>
            <!-- 搜索 -->
            <div class="material-search">
              <el-input v-model="queryParams.title" placeholder="搜索" clearable @keyup.enter.native="handleQuery" @clear="onClearSearch">
                <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
              </el-input>
            </div>
            <!-- tab -->
            <div class="material-tab">
              <div class="tab-list">
                <div class="tab-item" :class="item.value == curTab ? 'active' : ''" v-for="(item, index) in tabList"
                  @click="handleTab(item.value)">
                  {{ item.name }}
                </div>
                <div class="right-btn">
                  <span class="btn-item" :class="tabIndex == item.value ? 'active' : ''"
                    v-for="(item, index) in tabIndexList" @click="handleTabIndex(item.value)">{{ item.name }}</span>
                </div>
              </div>
            </div>
            <!-- 列表 -->
            <div style="overflow-y: scroll;height: 578px;">
              <div class="material-list" v-infinite-scroll="loadMore" infinite-scroll-immediate="false"
                infinite-scroll-disabled="disabledLoading">
                <div class="material-item" v-for="(item, index) in retrieveList" :key="item.id">
                  <div class="material-item-content">
                    <!-- 标题 -->
                    <el-tooltip class="item" :disabled="item.title.length<17" :content="item.title" placement="top">
                      <div class="material-title">{{ item.title }}</div>
                    </el-tooltip>

                    <!-- 图片 -->
                    <div class="material-video" v-if="item.type === 'img'">
                      <img :src="item.content" alt="" style="object-fit: contain;">
                    </div>
                    <!-- 视频 -->
                    <div class="material-video" v-if="item.type === 'video'">
                      <video :src="item.previewUrl" :poster="item.thumbnail" controls></video>
                    </div>
                    <!-- 文本 -->
                    <div class="material-desc" v-if="item.type === 'text'">
                      {{ item.content }}
                    </div>
                    <div class="material-tag">
                      <el-tooltip :disabled="cell.length<5" :content="cell" placement="top" v-for="(cell, index) in item.labels" :key="index">
                        <span class="tag text" >{{ cell }}</span>
                      </el-tooltip>
                    </div>
                    <!-- <div class="material-time">上传时间：{{ parseTime(new Date(item.publishDatetime), '{y}-{m}-{d}') }}</div> -->
                    <div class="material-btn">
                      <el-button type="primary" size="mini" class="reset-btn"
                        @click="handlePreview(item)">预览</el-button>
                      <el-button type="primary" size="mini" class="write-btn" v-if="item.type === 'img'"
                        @click="handleEdit(item)">编辑</el-button>
                      <el-button type="primary" size="mini" class="primary-btn"
                        @click="handleInsertion(item)">插入</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div style="width: 100%;height: 50px;text-align: center;color: #fff;">
                <div v-if="loading">加载中...</div>
                <div v-else-if="noMore">没有更多了</div>
              </div>
            </div>

          </div>
        </div>

        <div class="evaluate-content">
          <div class="evaluate-item">
            <div>情绪值</div>
            <div>{{ taskNews.emotionalScore || '--' }}</div>
          </div>
          <div class="evaluate-item">
            <div>真实度</div>
            <div>{{ taskNews.realityScore || '--' }}</div>
          </div>
          <div class="evaluate-item">
            <div>引导力</div>
            <div>{{ taskNews.totalScore || '--' }}</div>
          </div>
          <div class="evaluate-item btn" style="cursor: pointer;"  @click="evaluateNews">
            <img class="evaluate-icon" src="@/assets/icons/evaluate.png" alt="">
            <div>
              <div>内容</div>
              <div>评估</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部生成按钮 -->
    <div class="make-footer">
      <el-button type="primary" class="green-btn" size="medium" @click="createNews">生成新闻</el-button>
      <el-button type="primary" class="reset-btn" size="medium" @click="resetNews">重置内容</el-button>
      <el-button type="primary" class="primary-btn" size="medium" @click="handleView">预览</el-button>
    </div>
    <!-- 预览组件 -->
    <Preview ref="preview" />
    <EditorPreview ref="editorPreview" />
    <!-- 确认保存素材 -->
    <el-dialog :visible.sync="materialVisible" title="请确认是否保存素材" width="500px" @close="cancel">
      <el-form label-position="top" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="素材标题" prop="title">
          <el-input v-model="metaName" placeholder="请输入素材标题" maxlength="30" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" class="primary-btn" @click="submitSaveMaterial">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInitTask, editeNews, getTask } from "@/api/content/task";
import { getImageList, getVideoList, getTextList, addText, queryImageOrText, getVideoClipSearch } from "@/api/material/material";//素材接口表
import { getAudienceAllList } from "@/api/library/audience";//受众接口表
import { getStrategyList } from "@/api/library/strategy";//策略接口表
import { getFactorsList } from "@/api/library/factors";//心里要素接口表
import { createNewsGenerationText, newsAssessment } from "@/api/content/algorithm";//算法接口表
import Preview from "./components/Preview";
import EditorPreview from "./components/EditorPreview";
export default {
  name: "Task",
  dicts: ['language'],
  components: { Preview, EditorPreview },
  data() {
    var checkStrategt = (rule, value, callback) => {
      console.log(value, this.taskNews.elementIds, 'asdasd')
      setTimeout(() => {
        if (!value && !this.taskNews.elementIds) {
          callback(new Error('请选择策略'));
        } else {
          callback();
        }
      }, 500);
    };
    var checkElement = (rule, value, callback) => {
      setTimeout(() => {
        if (!value && !this.taskNews.strategyId) {
          callback(new Error('请选择心理要素'));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: ''
      },
      activeName: 'first',
      tabList: [
        {
          name: '图片',
          value: 1,
        },
        {
          name: '视频',
          value: 2,
        },
        {
          name: '文本 ',
          value: 3,
        },
      ],
      form: {},
      curTab: 1,
      editorForm: {
        title: '',
        content: ''
      },
      taskNews: {
        audienceId: '',
        elementIds: []
      },//新闻表单
      checkList: [],
      retrieveList: [],
      tabIndex: 'private',
      tabIndexList: [
        {
          name: '• 个人',
          value: 'private',
        },
        {
          name: '• 公共',
          value: 'public',
        },
      ],
      audienceList: [],//受众列表
      strategyList: [],//策略列表
      factorsList: [],//心里因素列表
      languageList: [],//语言列表
      taskId: '',
      workDir: '',
      newsContent: "",//生成的文案
      rules: {
        audienceId: [
          { required: true, message: '请选择受众人群', trigger: 'blur' },
        ],
        strategyIds: [
          { validator: checkStrategt, trigger: 'blur' }
        ],
        elementIds: [
          { validator: checkElement, trigger: 'blur' }
        ],
        language: [
          { required: true, message: '请选择语种', trigger: 'blur' },
        ],
        newsContent: [
          { required: true, message: '请输入主题', trigger: 'blur' },
        ],
      },
      materialVisible: false,
      metaName: '',
      savePrivate: false,//是否保存为私有
      savePublic: false,//是否保存为公有
      noMore: false
    };
  },
  computed: {
    disabledLoading() {
      return this.loading || this.noMore
    },
    userId() {
      return this.$store.getters.userId;
    },
  },
  mounted() {
    this.getAudienceList();
    this.getStrategyList();
    this.getFactorsList()

    console.log(this.$route.query.id)
    this.queryParams.userId = this.userId
    if (this.$route.query.id) {
      this.getTask(this.$route.query.id)
    } else {
      this.getInitTask()
    }

  },
  methods: {
    // 创建任务工作目录
    async getInitTask() {
      const res = await getInitTask({ type: 'NEWS' })
      console.log(res, '工作目录')
      this.taskNews = res.data.taskNews
      this.$set(this.taskNews, 'elementIds', [])
      this.workDir = res.data.workDir
      // 默认数据
      this.$set(this.taskNews, 'audienceId', this.audienceList[0].id)
      this.$set(this.taskNews, 'strategyIds', this.strategyList[0].id)
      this.$set(this.taskNews, 'language', this.dict.type.language[0].value)

      console.log(this.taskNews);
      this.getImageList();
    },
    // 获取任务详情
    async getTask(id) {
      const res = await getTask(id)
      console.log(res, '任务详情');
      this.taskNews = res.data.taskNews
      this.editorForm.title = res.data.taskNews.title
      this.editorForm.content = res.data.taskNews.content
      this.workDir = res.data.workDir
      this.$set(this.taskNews, 'elementIds', this.taskNews.factorIds ? this.taskNews.factorIds.split(',') : [])
      console.log(this.taskNews, 'factorIds');
    },
    // 获取受众列表
    async getAudienceList() {
      const { data: res } = await getAudienceAllList();
      console.log(res);
      this.audienceList = res;
    },
    // 获取策略列表
    getStrategyList() {
      getStrategyList(this.query).then().then(res => {
        console.log(res, '策略列表');
        this.strategyList = res.data;
      })
    },
    // 获取心里要素列表
    getFactorsList() {
      getFactorsList(this.query).then().then(res => {
        console.log(res);
        this.factorsList = res.data;
      })
    },
    changeTab(tab) {
      if(tab.name === 'second'){
        this.handleTab(1)
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.textTitle = this.queryParams.title
      this.retrieveList = []
      this.getList();
    },
    /**
     * 清空搜索
     */
    onClearSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.textTitle = this.queryParams.title = ''
      this.retrieveList = []
      this.getList();
    },
    // 选择策略
    changeStrategy() {
      this.$set(this.taskNews, 'elementIds', [])
    },
    // 选择要素
    changeElement() {
      this.taskNews.strategyIds = null
    },
    getList() {
      if (this.curTab === 1) {
        this.getImageList()
      } else if (this.curTab === 2) {
        this.getVideoList()
      } else {
        this.getTextList()
      }
    },
    // 切换素材库
    handleTab(e) {
      console.log(e)
      this.curTab = e
      this.queryParams.pageNum = 1;
      this.retrieveList = []
      if (e === 1) {
        this.getImageList()
      } else if (e === 2) {
        this.getVideoList()
      } else {
        this.getTextList()
      }
    },
    // 获取图片素材
    getImageList() {
      this.loading = true;
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        taskId: this.taskNews.taskId,
        queryType: 'IMAGE',
        queryContent: this.queryParams.title || '',
        userId: this.queryParams.userId
      }
      queryImageOrText(params).then(response => {
        this.total = response.total; // 保存总页数
        this.retrieveList = [...this.retrieveList, ...response.rows]; // 将新数据添加到原有数据列表中

        this.retrieveList = this.retrieveList.map(res => {
          res.type = 'img'
          return res
        });
        this.loading = false;
        if (this.retrieveList.length >= this.total) {
          console.log('没有更多数据')
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取视频素材
    getVideoList() {
      this.loading = true;
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        taskId: this.taskNews.taskId,
        queryContent: this.queryParams.title || '',
        userId: this.queryParams.userId
      }
      getVideoClipSearch(params).then(response => {

        if (this.queryParams.pageNum === 1) {
          console.log('sssssssssss')
          this.total = response.total; // 保存总页数
          this.retrieveList = []
        }
        this.retrieveList = [...this.retrieveList, ...response.rows]; // 将新数据添加到原有数据列表中

        this.retrieveList = this.retrieveList.map(res => {
          res.type = 'video'
          return res
        });
        console.log(this.retrieveList)
        this.loading = false;
        if (this.retrieveList.length >= this.total) {
          console.log('没有更多数据')
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取文本素材
    getTextList() {
      this.loading = true;
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        taskId: this.taskNews.taskId,
        queryType: 'TEXT',
        queryContent: this.queryParams.title,
        userId: this.queryParams.userId
      }
      queryImageOrText(params).then(response => {
        if (this.queryParams.pageNum === 1) {
          this.total = response.total; // 保存总页数
          this.retrieveList = []
        }
        this.retrieveList = [...this.retrieveList, ...response.rows]; // 将新数据添加到原有数据列表中

        this.retrieveList = this.retrieveList.map(res => {
          // res.title = res.textTitle
          res.type = 'text'
          return res
        });
        console.log(this.retrieveList)
        // this.queryParams.pageNum++; // 每次成功获取数据后页码+1
        this.loading = false;
        if (this.retrieveList.length >= this.total) {
          console.log('没有更多数据')
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    // 预览图文、视频
    handlePreview(detail) {
      this.$refs.preview.show(detail)
    },
    // 编辑
    handleEdit(row) {
      console.log(row)
      this.$router.push({
        path: '/content/imgMake',
        query: {
          id: row.id,
          type: 1,
        }
      })
      // this.$route.push({ path: '/content/textMake/editorPreview', query: { id: this.ids[0] } })
    },
    // 预览编辑器内容
    handleView() {
      console.log(this.editorForm)
      if (this.editorForm.title == '') {
        return this.$modal.msgError("请输入标题");
      }
      if (this.editorForm.content == '') {
        return this.$modal.msgError("请输入内容");
      }
      this.$refs.editorPreview.show(this.editorForm)
    },
    // 插入
    handleInsertion(item) {
      console.log(item)
      if (item.type === 'img') {
        this.editorForm.content = this.editorForm.content + `<img src="${item.content}" alt="">`
      } else if (item.type === 'video') {
        this.$nextTick(() => {
          this.editorForm.content = this.editorForm.content + `<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="${item.previewUrl}"></iframe>`//<video src="${item.previewUrl}" controls="controls"></video>
        })
      } else {
        // this.form.content = this.form.content + `<p>${item.textContent}</p>`)}
        this.editorForm.content = this.editorForm.content + item.content
      }
    },
    // 切换个人公共
    handleTabIndex(tabIndex) {
      this.tabIndex = tabIndex
      this.queryParams.pageNum = 1;
      this.retrieveList = []
      if (tabIndex === 'private') {
        this.queryParams.userId = this.userId
      } else {
        this.queryParams.userId = ''
      }
      if (this.curTab === 1) {
        this.getImageList()
      } else if (this.curTab === 2) {
        this.getVideoList()
      } else {
        this.getTextList()
      }
    },
    /** 提交按钮 */
    submitForm() {

    },
    // 生成文案
    createNewsText() {
      console.log(this.taskNews)
      this.taskNews.factorIds = this.taskNews.elementIds ? this.taskNews.elementIds.join(',') : ''
      this.$refs["taskNews"].validate(valid => {
        if (valid) {
          this.openLoading();
          createNewsGenerationText(this.taskNews).then(res => {
            console.log(res)
            this.newsContent = res.data.text.output
            this.$modal.closeLoading();
          }).catch(err => {
            this.$modal.closeLoading();
          })
        }
      });
    },
    // 一键插入
    oneInsertion() {
      if (this.newsContent == '') {
        this.$modal.msgError('请先生成文案');
      } else {
        this.editorForm.content = this.editorForm.content + this.newsContent
      }
    },
    // 新闻真实度评估
    evaluateNews() {
      console.log(this.taskNews, '00000')
      if (this.editorForm.title == '' || this.editorForm.title == undefined || this.editorForm.title == null) {
        this.$modal.msgError('请输入标题')
        return
      }
      if (this.editorForm.content == '' || this.editorForm.content == undefined || this.editorForm.content == null || this.editorForm.content == '<p><br></p>') {
        this.$modal.msgError('请输入内容')
        return
      }
      const params = {
        ...this.taskNews,
        ...this.editorForm,
        workDir: this.workDir
      }
      console.log(this.editorForm)
      this.openLoading();
      newsAssessment(params).then(res => {
        this.taskNews.emotionalScore = res.data.emotionalScore
        this.taskNews.total = res.data.total
        this.taskNews.realityScore = res.data.realityScore
      }).finally(() => {
        this.$modal.closeLoading();
      })
    },
    // 生成新闻
    createNews() {
      console.log(this.taskNews)
      if (this.editorForm.title == '' || this.editorForm.title == undefined || this.editorForm.title == null) {
        this.$modal.msgError('请输入标题')
        return
      }
      if (this.editorForm.content == '' || this.editorForm.content == undefined || this.editorForm.content == null || this.editorForm.content == '<p><br></p>') {
        this.$modal.msgError('请输入内容')
        return
      }
      const params = {
        ...this.taskNews,
        ...this.editorForm,
        workDir: this.workDir
      }
      console.log(this.editorForm)
      this.openLoading();
      editeNews(params).then(res => {
        console.log(res)
        this.$modal.msgSuccess('生成成功');
        this.$modal.closeLoading();
        // this.$router.push({
        //   path: '/content/task/list'
        // })
        // this.newsContent = res.data.newsContent
        this.resetNews()
        this.getInitTask()
      }).catch(err => {
        this.$modal.closeLoading();
      })


    },
    // 重置新闻
    resetNews() {
      // this.taskNews = {
      //   audienceId: undefined,
      //   strategyId: undefined,
      //   elementIds: [],
      //   language: undefined,
      //   newsContent: undefined,
      // };
      this.taskNews.newsContent = ''
      this.newsContent = ''
      // this.resetForm("taskNews");
      this.editorForm.title = ''
      this.editorForm.content = ''
    },
    cancel() {
      this.materialVisible = false
    },
    // 保存素材
    async saveMaterial() {
      console.log(this.taskNews)
      if (this.newsContent == '' || this.newsContent == undefined) {
        return this.$modal.msgError('请输入新闻内容')
      }
      this.metaName = this.parseTime(new Date())
      this.materialVisible = true
    },
    async submitSaveMaterial() {
      if (this.metaName == '' || this.metaName == undefined) {
        return this.$modal.msgError('请输入素材标题')
      }
      const params = {
        id: this.taskNews.id,
        user: this.taskNews.user,
        factorIds: this.taskNews.elementId,
        textTitle: this.metaName,
        textContent: this.newsContent,
        savePrivate: this.savePrivate,
        savePublic: this.savePublic,
      }
      console.log(params)
      const { data } = await addText(params)
      console.log(data)
      this.$modal.msgSuccess("保存成功");
      this.materialVisible = false

    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在生成，请稍候！");
    },
    // 加载更多
    loadMore() {
      console.log(this.queryParams.pageNum)
      this.queryParams.pageNum += 1
      this.getList()
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  overflow: hidden !important;
}

.bg {
  background-image: url("../../../assets/images/content_bg.png");
  background-size: 25%;
  background-repeat: no-repeat;
  background-position: top right;
}

.make-content {
  display: flex;
}

.make-left {
  flex: 1;
  margin-right: 20px;
  background: rgba(255, 255, 255, .1);
  padding: 20px;
  border-radius: 12px;
}

.make-right {
  width: 564px;

}

.ai-write {
  background: rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 10px 20px 20px;

  .ai-write-btn {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

    .el-button {
      flex: 1;
      padding: 13px 0;
      font-size: 16px;
    }
  }

  .create-content {
    margin-top: 10px;
  }

  .form-btn {
    margin-top: 20px;

    .el-button {
      padding: 13px 0;
      font-size: 16px;
      width: 100%;
    }
  }
}

.evaluate-content {
  background: rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .6);

  .evaluate-item {
    flex: 1;

    .evaluate-icon {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }

  .evaluate-item.btn {
    display: flex;
    align-items: center;
    background: rgba(0, 87, 255, 1);
    color: #fff;
    border-radius: 4px;
    justify-content: center;
    padding: 10px 0;
  }
}

.make-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  background: rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 20px;

  .el-button {
    margin-left: 20px;
  }
}
.material-search {
  ::v-deep .el-input-group__append {
    background-color: transparent;
    border-color: #4D4E5F;
  }
}
.material-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #fff;

  .material-item {
    margin-bottom: 12px;
    width: 48.8%;

    .material-item-content {
      background: rgba(255, 255, 255, .1);
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #4D4E5F;
    }

    .material-title {
      // height: 40px;
      font-size: 14px;
      margin-bottom: 10px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      /*这里是超出几行省略*/
      overflow: hidden;
    }

    .material-video {
      img {
        width: 100%;
        height: 140px;
      }

      video {
        width: 100%;
        height: 140px;
      }
    }

    .material-desc {
      height: 60px;
      font-size: 12px;
      color: rgba(255, 255, 255, .8);
      line-height: 20px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      /*这里是超出几行省略*/
      overflow: hidden;
    }

    .material-tag {
      margin: 10px 0 10px;

      .tag {
        max-width: 100px;
        display: inline-block;
        background: rgba(9, 184, 68, 0.08);
        color: #09B844;
        padding: 3px 10px;
        font-size: 12px;
        border-radius: 2px;
        margin-right: 10px;
      }

      .text {
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 使用省略号表示被隐藏的文本 */
        white-space: nowrap;
        /* 不允许文本换行 */
      }

      .tag:last-child {
        background: rgba(0, 87, 255, 0.08);
        color: #0057FF;
      }
    }

    .material-time {
      font-size: 12px;
    }

    .material-btn {
      display: flex;
      margin-top: 15px;

      .primary-btn {
        padding: 7px 30px;
      }
    }
  }
}

.tab-list {
  margin: 20px 0;
  align-items: center;

  .right-btn {
    flex: 1;
    text-align: right;
    color: rgba(255, 255, 255, .6);

    .btn-item {
      margin-left: 40px;
      cursor: pointer;
    }

    .btn-item.active {
      color: rgba(0, 87, 255, 1);
      border-bottom: 1px solid rgba(0, 87, 255, 1);
      padding-bottom: 10px;
    }
  }
}

::v-deep .ql-toolbar.ql-snow {
  border: none;
  background: #F7F8FA;
}

::v-deep .ql-container.ql-snow {
  border: none;
}

::v-deep .el-tabs__item {
  color: #fff;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
  background: #4D4E5F;
}

::v-deep .el-tabs__item:hover {
  color: #0057FF;
}

::v-deep .el-tabs__item.is-active {
  color: #0057FF;
}

::v-deep .el-tabs__active-bar {
  background: #0057FF;
}
</style>
